<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app"></div>
    <script src="../js/babel.min.js"></script>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script type="text/babel">
      function Demo() {
        // 使用hook状态
        const [count, setCount] = React.useState(0);

        const myRef = React.useRef()

        // console.log(count, setCount);

        /**
         * 进行监听数据渲染，
         * 不传参所有改变state重新渲染都进行调用
         * 传空数组，只在第一次渲染页面调用
         * 传数据，则监听某个数据
         * 返回的函数在组件将要被销毁时调用
         * */
        React.useEffect(() => {
          let timer = setInterval(() => {
            setCount(count + 1);
          }, 1000);
          return () => {
            clearInterval(timer);
          };
        }, [count]);

        function add() {
          setCount(count + 1);
        }
        function show(){
          console.log('myRef :>> ', myRef.current.value);
        }
        return (
          <div>
            <h1>count = {count}</h1>
            <button onClick={add}>+1</button>&nbsp;
            <button onClick={show}>展示Ref</button>
            <br/>
            <input type="text" ref={myRef}/>
          </div>
        );
      }
      ReactDOM.render(<Demo />, document.getElementById("app"));
    </script>
  </body>
</html>
